<template>
  <div class="container">
    <el-row>
      <el-button
        style="margin-bottom: 12px"
        icon="el-icon-plus"
        type="primary"
        @click="exportExcel()"
        >导出excel</el-button
      >
      <el-select
        style="margin-left: 20px"
        v-model="formData.selectData"
        placeholder="筛选数据"
        @change="panduan = !panduan"
      >
        <el-option label="全部数据" value="全部数据"></el-option>
        <el-option label="部分数据" value="部分数据"></el-option>
      </el-select>
    </el-row>
    <el-table
      id="exportTable"
      :header-cell-style="getRowClass"
      :row-class-name="tableRowClassName"
      :data="panduan ? tableData : tableDataesay"
      show-summary
      :summary-method="getSummaries"
      :header-row-style="{ height: '50px' }"
      :row-style="{ height: '51px' }"
      height="650"
      style="width: 100%"
    >
      <el-table-column
        type="index"
        label="序号"
        fixed
        width="70"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="whatModel"
        label="型号"
        fixed
        width="100"
        align="center"
        sortable
      >
      </el-table-column>
      <el-table-column prop="diameter" label="直径" align="center" sortable>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in headtableData"
        :label="item.craft"
        align="center"
        width="155"
      >
        <template slot-scope="{ row }">
          <div>
            {{
              row.value[index].number || row.value[index].anyWeight
                ? row.value[index].number + "|" + row.value[index].anyWeight
                : "--"
            }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
import { TotalListNowgetAll } from "@/api/stock/BalanceSheet.js";
export default {
  name: "steepContent",
  data() {
    return {
      createform: {
        mold: "电极",
      },
      tableData: [],
      tableDataesay: [],
      headtableData: [],
      formData: { selectData: "全部数据" },
      panduan: true,
    };
  },
  created() {},
  mounted() {
    this.getAllData();
  },
  computed: {},
  methods: {
    getAllData() {
      console.log(this.createform);
      TotalListNowgetAll(this.createform).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.pageData;
          let a = this.tableData.shift();
          this.tableDataesay = this.tableData.filter((item) => {
            return item.anyWeights != 0 || item.numbers != 0;
          });
          this.tableData.push(a);
          this.headtableData = this.tableData[0].value;
          console.log(this.tableDataesay, "表格");
          console.log(this.headtableData, "表头");
        } else {
          this.tableData = [];
        }
      });
    },
    //导出excel
    exportExcel() {
      //不加判断table表格导出会有两份数据，是因为fixed造成的，所以要筛选去重
      // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
      var fix = document.querySelector(".el-table__fixed");
      var exportTable;
      if (fix) {
        exportTable = XLSX.utils.table_to_book(
          document.querySelector("#exportTable").removeChild(fix)
        );
        document.querySelector("#exportTable").appendChild(fix);
      } else {
        exportTable = XLSX.utils.table_to_book(
          document.querySelector("#exportTable")
        );
      }
      var exportTableOut = XLSX.write(exportTable, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      //sheetjs.xlsx为导出表格的标题名称
      try {
        FileSaver.saveAs(
          new Blob([exportTableOut], { type: "application/octet-stream" }),
          "电极正品表.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, exportTableOut);
      }
      return exportTableOut;
    },

    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        const values = data.map((item) => Number(item[column.property]));

        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else {
          sums[0] = "";
          sums[1] = "总支数|总重";
          sums[2] = "";
          for (let i = 3; i < data[45].value.length + 3; i++) {
            let a = i - 3;
            sums[
              i
            ] = `${data[45].value[a].number}|${data[45].value[a].anyWeight}`;
          }
        }
      });

      return sums;
    },
    tableRowClassName({ row, rowIndex }) {
      // console.log(row,rowIndex);
      if (rowIndex == 45) {
        return "hidden-row";
      }
      return "";
    },
  },
};
</script>

<style scoped>
.el-button--text {
  color: #fff;
}
</style>
<style >
.el-table .hidden-row {
  display: none;
}
</style>
